<template>
	<view class="main">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="content">商品详情</block>
		</cu-custom>
		<view class="main">
			<swiper class="screen-swiper bg-white" :indicator-dots="true" :autoplay="true" interval="1000" duration="500"
			 :circular="true" :vertical="true" indicator-active-color="#f40" :display-multiple-items="1">
				<swiper-item v-for="(item,index) in skus[index].images" :key="index">
					<image :src="imageSrc+item.largeImage" class="swiper-item" mode="aspectFit"></image>
				</swiper-item>
			</swiper>
		</view>

		<view class="solids-bottom padding-xs flex align-center bg-white">
			<view class="flex-sub ">
				<view class="solid-bottom text-xxl padding">
					<text class="text-price text-red">{{ skus[index].price }}</text>
				</view>
				<view class="padding">{{ skus[index].name }}</view>
			</view>
		</view>

		<view class="cu-bar bg-white solid-bottom">
			<view class="action">
				<text class="cuIcon-title text-orange"></text> 商品详情
			</view>
		</view>
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in labels" :key="index"
				 @tap="tabSelect" :data-id="index">
					{{item}}
				</view>
			</view>
		</scroll-view>

		<view class="main" v-if="TabCur==0">
			<!-- 图文详情 -->
			<view class="content" v-for="item in images" :key="item">
				<image :src="imageSrc+item" mode="aspectFill" style="width:100%"></image>
			</view>
		</view>

		<view class="main" v-if="TabCur==1">
			<!-- 商品介绍-->
			<view>
				<view v-for="item in skus[index].attrs" class="solid padding-sm bg-white flex flex-wrap" :key="item">
					<view class="flex-sub flex justify-start align-center solid-right">
						{{ item.name }}
					</view>
					<view class="flex-sub flex justify-start align-cente">
						{{ item.value}}
					</view>
				</view>
			</view>
		</view>

		<view class="main" v-if="TabCur==2">
			<!-- 规格包装-->
			<view class="bg-white">
				<view class="flex solid " v-for="item in skus[index].specGroups" :key="item">
					<view class="flex-sub flex justify-center align-center">
						{{ item.group }}
					</view>
					<view class="flex-twice">
						<view class="solid padding-sm flex" v-for="present in item.specsList" :key="present">
							<view class="flex-sub flex justify-start align-center">
								{{ present.name}}
							</view>
							<view class="flex-sub flex justify-center align-center">
								{{ present.value}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="main" v-if="TabCur==3">
			<!-- 商品评价-->

		</view>

		<view class="cu-bar bg-white tabbar border shop foot">
			<button class="action" open-type="contact">
				<view class="cuIcon-service text-green">
					<view class="cu-tag badge"></view>
				</view>
				客服
			</button>
			<view class="action">
				<view class="cuIcon-cart">
					<view class="cu-tag badge">99</view>
				</view>
				购物车
			</view>
			<view class="bg-orange submit" @click="addToCar">加入购物车</view>
			<view class="bg-red submit">立即订购</view>
		</view>

		<view class="cu-modal bottom-modal" :class="hideModel?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white flex justify-between">
					<button class="cu-btn round bg-gradual-red " @click="cancelHideModal">取消</button>
					<button class="cu-btn round bg-gradual-blue " @click="sureHideModal">确定</button>
				</view>
				<view class="flex align-center bg-white">
					<view class="justify-center">
						<image :src="imageSrc+skus[index].images[0].largeImage" mode="aspectFit" style="height:100px"></image>
						<view class="text-xxl  text-center">
							<text class="text-price text-red">{{ skus[index].price }}</text>
						</view>
						<view class="padding">{{ skus[index].name }}</view>
					</view>
				</view>

				<view class="grid col-3 padding-sm">
					<view v-for="(item,flag) in skus.length" class="padding-xs" :key="item">
						<button class="cu-btn orange lg block" :class="flag==index?'bg-orange':'line-orange'" @tap="ChooseCheckbox(flag)">
							规格{{flag}}
						</button>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				hideModel: false,
				index: 0,
				TabCur: 0,
				skus: [],
				images: [],
				labels: ["图文详情", '商品介绍', '规格包装', '商品评价'],
				imageSrc: 'http://123.57.7.108:81/'
			}
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
			},
			ChooseCheckbox(flag) {
				this.index = flag;
			},
			cancelHideModal() {
				this.hideModel = false;
			},
			sureHideModal() {
				this.hideModel = true;
				let cartId;
				this.$api.api_getCart()
					.then(res => {
						cartId = res.data.data.id;
						return this.$api.api_addToCar({
							cartId: cartId,
							skuId: this.skus[this.index].id,
							count: 1
						})
					})
					.then(res => {
						uni.showToast({
							title: '成功加入购物车！',
							duration: 1000
						})
						this.hideModel = false;
					})
					.catch(err => {
						console.log(err)
					})
			},
			addToCar() {
				
				this.hideModel = true;
			}
		},
		onLoad(params) {
			this.$api.api_spudetails({
					id: params.id
				})
				.then(res => {
					this.images = res.data.data.images;
					this.skus = res.data.data.skus;
				})
				.catch(error => {
					console.log(error)
				})
		}
	}
</script>

<style>

</style>
